<template>
  <el-form :model="parkInfoModel" ref="parkInfoForm" :inline="true" label-width="72px" :label-position="'left'">
    <el-row class="search-title">条件搜索</el-row>
    <el-form-item prop="plateNo">
      <el-input v-model="parkInfoModel.plateNo" prefix-icon="el-icon-search" clearable
                placeholder="车牌号"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button class="btn-search" type="primary" @click="handleQueryParkInfo">搜索
      </el-button>
      <el-button class="btn-search" type="primary" @click="handleResetParkInfo">重置
      </el-button>
    </el-form-item>
    <collapse-vertical>
      <div v-show="isDisplay">
        <el-row>
          <el-form-item prop="parkName">
            <el-input clearable placeholder="停车场名称" readonly v-model="parkInfoModel.parkName" @click.native="openPark"></el-input>
          </el-form-item>
          <el-form-item prop="plateColor">
            <el-select v-model="parkInfoModel.plateColor" placeholder="车牌颜色">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-row>
            <el-form-item>
              <el-date-picker
                v-model="parkInfoModel.start"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="入场时间">
              </el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-date-picker
                v-model="parkInfoModel.end"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="出场时间">
              </el-date-picker>
            </el-form-item>
          </el-row>
          <el-form-item>
            <!--<el-switch
              style="display: block;"
              v-model="parkInfoModel.model"
              active-color="#13ce66"
              inactive-color="#2276d2"
              active-text="历史流水"
              inactive-text="在停流水"
              @change="getSwitchValue">
            </el-switch>-->
            <el-radio v-model="parkInfoModel.model" label="1" @change="getSwitchValue" style="color: white">在停流水</el-radio>
            <el-radio v-model="parkInfoModel.model" label="2" @change="getSwitchValue" style="color: white">历史流水</el-radio>
          </el-form-item>

          <el-form-item>
            <el-button class="btn-mini-form" type="primary" style="color: white" @click="handleQueryParkInfo" size="mini">搜索
            </el-button>
            <el-button class="btn-mini-form" type="primary" style="color: white" @click="handleResetParkInfo" size="mini">重置
            </el-button>
          </el-form-item>
        </el-row>
      </div>
    </collapse-vertical>
    <el-row style="text-align: center">
      <el-button style="border: none;background-color: transparent" size="small"
                 @click="isShow" :icon="isDisplay?'el-icon-arrow-up':'el-icon-arrow-down'">
      </el-button>
    </el-row>
  </el-form>
</template>

<script>
  import CollapseVertical from '../../../utils/collapseVertical'
  export default {
    components: {
      CollapseVertical
    },
    props: ['parkMsg'],
    name: 'park-info-form',
    watch: {
      parkMsg(val) {
        this.parkInfoModel.parkName = val.parkName;
        this.parkInfoModel.parkNo = val.parkNo;
        console.log(this.parkInfoModel);
      }
    },
    data() {
      return {
        // 0：白，1：黄，2:蓝，3：黑，4：绿，9：其他颜色
        options: [{
          value: 0,
          label: '白色'
        }, {
          value: 1,
          label: '黄色'
        }, {
          value: 2,
          label: '蓝色'
        }, {
          value: 3,
          label: '黑色'
        }, {
          value: 4,
          label: '绿色'
        }, {
          value: 9,
          label: '其他颜色'
        }],
        isDisplay: false,
        parkInfoModel: {
          parkName: '',
          plateNo: '',
          model: '',
          plateColor: '',
          parkNo: '',
          start: '',
          end: ''
        }
      }
    },
    methods: {
      handleQueryParkInfo() {
        this.$emit('handleQueryParkInfo', this.parkInfoModel)
      },
      handleResetParkInfo() {
        this.$refs['parkInfoForm'].resetFields()
        this.$emit('handleQueryParkInfo', this.parkInfoModel)
      },
      getSwitchValue() {
        this.$emit('changeModel', this.parkInfoModel)
      },
      isShow() {
        this.isDisplay = !this.isDisplay
      },
      /* 打开车场弹出框*/
      openPark() {
        this.$emit('openParkDialog', true);
      }
    }
  }
</script>
<style scoped>
  .el-switch__label {
    font-size: 1em;
  }

</style>
